<template>
  <div class="notice-container">
    <el-form size="small" :inline="true">
      <el-form-item>
        <el-input v-model="name" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="open" icon="el-icon-plus"
          >新增公告</el-button
        >
        <el-button icon="el-icon-search" @click="getList" type="primary"
          >查询公告</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column prop="content" label="公告内容" />
      <el-table-column prop="createTime" label="上传时间" width="180">
        <template slot-scope="scope">
          {{ formatDate(1, scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="address" align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-popconfirm
            @onConfirm="deleteClick(scope.row.id)"
            title="确定删除该公告吗？"
          >
            <template #reference>
              <el-button style="color: red" type="text" size="small"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div> -->
    <el-dialog
      @close="form.content = ''"
      title="新增公告"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>
        <el-input
          maxlength="20"
          show-word-limit
          placeholder="请输入公告内容"
          v-model="form.content"
          clearable
          ref="noticeInput"
        >
        </el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="btnLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { upload, del, list } from "@/api/notice";
export default {
  data() {
    return {
      name: "", // 模糊搜索需要的字段
      dialogVisible: false, // 弹窗显示与隐藏
      btnLoading: false, // 按钮loading
      tableData: [], // 表格数据
      loading: false, // 表格loading

      // total: 0, 总条数
      form: {
        page: 1,
        pageSize: 9,
        content: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 删除公告
    async deleteClick(id) {
      const res = await del(id);
      if (res.code === 200) {
        this.$message.success(res.message);
        this.getList();
      }
    },
    // 打开弹窗
    open() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.noticeInput.focus();
      });
    },
    // 查询公告
    getList() {
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        content: this.form.content,
      };
      this.loading = true;
      list().then((res) => {
        this.tableData = res.data;
        this.loading = false;
      });
    },
    // 点击新增
    onSubmit() {
      if (!this.form.content) {
        return;
      }
      this.btnLoading = true;
      upload({
        content: this.form.content,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.message);
          this.btnLoading = false;
          this.dialogVisible = false;
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// .page {
//   margin-top: 15px;
//   display: flex;
//   justify-content: center;
// }
</style>
